<template>
    <swiper :options="swiperOption">
        <swiper-slide v-for="slide in swiperSlides" :key="slide.id" class="liimg">
            <img :src="slide.src">
        </swiper-slide>
        <p class="swiper-pagination" slot="pagination"></p></swiper>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  data () {    return {
      swiperOption: {
        autoplay:true,//自动切换
        pagination: {
          el: '.swiper-pagination'//分页器
        }
      },
      swiperSlides: [{id:1,src:require("../../../public/image/1.jpg")}, {id:2,src:require("../../../public/image/2.jpg")},{id:3,src:require("../../../public/image/3.jpg")},{id:4,src:require("../../../public/image/4.jpg")}]
    }
  },
  components:{
    swiper,
    swiperSlide
  }
}
</script>
<style lang="scss">
    .liimg{
        width: 100%;
        height: 300px;
        img{
            width: 100%;
            height: 300px;
        }
    }
    
</style>